<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/animate.js"></script>
    <script src="./js/index.js"></script>
</head>

<body>
    <!-- 头部开始 -->
    <div class="header">
        <div class="w">
            <!-- 网易音乐人 -->
            <h1>
                <a href="#">
                    网易音乐人
                </a>
            </h1>
            <div class="short_nav">
                <ul>
                    <li>
                        <a href="javascript:;">首页</a>
                    </li>
                    <li>
                        <a href="javascript:;">常见问题</a>
                    </li>
                    <li>
                        <a href="javascript:;" class="color">关于我们</a>
                    </li>
                </ul>
            </div>
            <!-- 登录 -->
            <div class="login">
                <a href="#">登录</a>
            </div>
        </div>
    </div>
    <!-- 大图片 -->
    <div class="gif_img">
        <div class="w clearfix">
            <div class="yingwen first clearfix">NCNDSCNSDJKCNK
                <br>2025151
                <br>JSNCKJSNCKNSJNKJ<br></div>
            <div class="yingwen clearfix">1513135165<br>SBSCBSDBCSJKDBC<br> SBSCBSDBCSJKDBC
                <br></div>
            <div class="title">
                <h1>欢迎所有音乐"狂梦"</h1>
            </div>
            <div class="renshu">
                <h3>20w+音乐人的选择 中国领先的原创音乐人平台</h3>
            </div>
            <!-- //音乐人 -->
            <div class="yinyue">
                <a href="#">音乐人</a>
                <a href="#">词曲作者</a>
            </div>
            <div class="apply">
                <a href="#">
                    Apply For Netease Artists
                </a>
            </div>
            <!-- 箭头 -->
            <div class="div">
                <img src="./imgs/jiantou.png" alt="">
            </div>
        </div>
    </div>
    <div class="main">
        <div class="w">
            <div class="join">
                <span> 20W+音乐人已加入</span>
            </div>

            <!-- 动画 -->
            <div class="animate">
                <div class="top">
                    <ul>
                        <li>
                            <img src="./imgs/01.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>

                        <li>
                            <img src="./imgs/02.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/03.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/04.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/05.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/04.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/07.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/08.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/09.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/10.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/01.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/02.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/03.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/04.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/05.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/04.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/07.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/08.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/09.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>

                        <li>
                            <img src="./imgs/10.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/01.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                    </ul>
                </div>
                <div class="top">
                    <ul>
                        <li>
                            <img src="./imgs/01.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>

                        <li>
                            <img src="./imgs/02.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/03.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/04.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/05.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/04.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/07.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/08.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/09.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/10.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/01.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/02.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/03.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/04.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/05.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/04.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/07.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/08.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/09.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>

                        <li>
                            <img src="./imgs/10.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                        <li>
                            <img src="./imgs/01.png" alt="">
                            <p>
                                粉丝:74.8万
                            </p>
                            <div class="name">张杰</div>
                        </li>
                    </ul>
                </div>

            </div>

            <!-- 起点 -->
            <div class="start">
                <p>这里为起点</p>
                <p>开启你的音乐事业</p>
            </div>

            <h2>音乐发行</h2>
            <h4>全网领先的一站式发行服务，护航你的音乐之路</h4>

            <div class="publish-box">
                <ul>
                    <li>
                        <img src="./imgs/one.png" alt="">
                        <h3>自主发行</h3>
                        <p>作品发布简单快捷
                        </p>
                        <p>第一时间跟粉丝分享你的音乐</p>
                    </li>
                    <li>
                        <img src="./imgs/one.png" alt="">
                        <h3>自主发行</h3>
                        <p>作品发布简单快捷
                        </p>
                        <p>第一时间跟粉丝分享你的音乐</p>
                    </li>
                    <li>
                        <img src="./imgs/one.png" alt="">
                        <h3>自主发行</h3>
                        <p>作品发布简单快捷
                        </p>
                        <p>第一时间跟粉丝分享你的音乐</p>
                    </li>
                </ul>
                <ul>
                    <li>
                        <img src="./imgs/one.png" alt="">
                        <h3>自主发行</h3>
                        <p>作品发布简单快捷
                        </p>
                        <p>第一时间跟粉丝分享你的音乐</p>
                    </li>
                    <li>
                        <img src="./imgs/one.png" alt="">
                        <h3>自主发行</h3>
                        <p>作品发布简单快捷
                        </p>
                        <p>第一时间跟粉丝分享你的音乐</p>
                    </li>
                    <li>
                        <img src="./imgs/one.png" alt="">
                        <h3>自主发行</h3>
                        <p>作品发布简单快捷
                        </p>
                        <p>第一时间跟粉丝分享你的音乐</p>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 粉丝积累模块 -->
        <div class="jilei">
            <div class="w">
                <h2>粉丝积累</h2>
                <p>强大的智能推广机制，让你的每一首作品都有回音</p>
            </div>
        </div>

        <!-- 获得收益 -->
        <div class="get">
            <div class="w">
                <div class="title">
                    <h2>获得收益</h2>
                    <h4>云梯计划助推多渠道变现，全面兑现你的作品价值</h4>
                </div>
                <div class="nav">
                    <ul>
                        <li>
                            <div class="left">
                                <img src="./imgs/dian.png" alt="">
                            </div>
                            <div class="right">
                                <div class="little">点播分成</div>
                                <div class="bottom">作品根据播放情况获得分成</div>
                            </div>
                        </li>
                        <li>
                            <div class="left">
                                <img src="./imgs/dian.png" alt="">
                            </div>
                            <div class="right">
                                <div class="little">点播分成</div>
                                <div class="bottom">作品根据播放情况获得分成</div>
                            </div>
                        </li>
                        <li>
                            <div class="left">
                                <img src="./imgs/dian.png" alt="">
                            </div>
                            <div class="right">
                                <div class="little">点播分成</div>
                                <div class="bottom">作品根据播放情况获得分成</div>
                            </div>
                        </li>
                        <li>
                            <div class="left">
                                <img src="./imgs/dian.png" alt="">
                            </div>
                            <div class="right">
                                <div class="little">点播分成</div>
                                <div class="bottom">作品根据播放情况获得分成</div>
                            </div>
                        </li>
                        <li>
                            <div class="left">
                                <img src="./imgs/dian.png" alt="">
                            </div>
                            <div class="right">
                                <div class="little">点播分成</div>
                                <div class="bottom">作品根据播放情况获得分成</div>
                            </div>
                        </li>
                        <li>
                            <div class="left">
                                <img src="./imgs/dian.png" alt="">
                            </div>
                            <div class="right">
                                <div class="little">点播分成</div>
                                <div class="bottom">作品根据播放情况获得分成</div>
                            </div>
                        </li>
                        <li>
                            <div class="left">
                                <img src="./imgs/dian.png" alt="">
                            </div>
                            <div class="right">
                                <div class="little">点播分成</div>
                                <div class="bottom">作品根据播放情况获得分成</div>
                            </div>
                        </li>
                        <li>
                            <div class="left">
                                <img src="./imgs/dian.png" alt="">
                            </div>
                            <div class="right">
                                <div class="little">点播分成</div>
                                <div class="bottom">作品根据播放情况获得分成</div>
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="phone">
                    <img src="./imgs/iphone.png" alt="">
                    <img src="./imgs/iphone.png" alt="">
                    <img src="./imgs/iphone.png" alt="">
                </div>
            </div>
        </div>

        <!-- 独家创新功能 -->
        <div class="create">
            <div class="w">
                <div class="create_title">独家创新功能<br>扩宽你的音乐“赛道”</div>
                <div class="box">
                    <ul>
                        <li class="music">
                            <h3>智能创作</h3>
                            <p class="all">全天候音乐参谋，为你的创作助力</p>
                            <p class="line"></p>
                            <a href="#" class="a">AI 智能作曲 ></a>
                            <a href="#" class="a">Amped Studio在线制作 ></a>
                        </li>
                        <li>
                            <h3>智能创作</h3>
                            <p class="all">全天候音乐参谋，为你的创作助力</p>
                            <p class="line"></p>
                            <a href="#" class="a">AI 智能作曲 ></a>
                            <a href="#" class="a">Amped Studio在线制作 ></a>
                        </li>
                        <li>
                            <h3>智能创作</h3>
                            <p class="all">全天候音乐参谋，为你的创作助力</p>
                            <p class="line"></p>
                            <a href="#" class="a">AI 智能作曲 ></a>
                            <a href="#" class="a">Amped Studio在线制作 ></a>
                        </li>
                        <li class="music">
                            <h3>智能创作</h3>
                            <p class="all">全天候音乐参谋，为你的创作助力</p>
                            <p class="line"></p>
                            <a href="#" class="a">AI 智能作曲 ></a>
                            <a href="#" class="a">Amped Studio在线制作 ></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 多元扶持计划 -->
        <div class="plan">
            <div class="w">
                <div class="plan_title">多元扶持计划<br> 实现你的音乐“妄想”
                </div>
                <div class="box_nav">
                    <div class="hd_nav">
                        <ul>
                            <li class="cut">更多企划
                                <div></div>
                                <div class="san"></div>
                            </li>
                            <li>更多企划
                                <div></div>
                            </li>
                            <li>更多企划
                                <div></div>
                            </li>
                            <li>更多企划
                                <div></div>
                            </li>
                            <li>更多企划
                                <div></div>
                            </li>
                        </ul>
                    </div>
                    <div class="bd_nav clearfix">
                        <ul>
                            <li class="current clearfix">
                                <img src="./imgs/zuijai.png" alt="">
                                <img src="./imgs/zuijai.png" alt="" class="two">
                                <img src="./imgs/zuijai.png" alt="">
                            </li>
                            <li class=" clearfix">
                                <img src="./imgs/woman.jpg" alt="">
                                <img src="./imgs/woman.jpg" alt="" class="two">
                                <img src="./imgs/woman.jpg" alt="">
                            </li>
                            <li class=" clearfix">
                                <img src="./imgs/man.jpg" alt="">
                                <img src="./imgs/man.jpg" alt="" class="two">
                                <img src="./imgs/man.jpg" alt="">
                            </li>
                            <li class=" clearfix">
                                <img src="./imgs/ss.png" alt="">
                                <img src="./imgs/ss.png" alt="" class="two">
                                <img src="./imgs/ss.png" alt="">
                            </li>
                            <li class=" clearfix">
                                <img src="./imgs/zuijai.png" alt="">
                                <img src="./imgs/zuijai.png" alt="" class="two">
                                <img src="./imgs/zuijai.png" alt="">
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!--  -->
        <div class="kaiqi">
            <h4>开启你的音乐事业</h4>
            <p>实现所有音乐"妄想"</p>
            <div class="btn">
                <a href="#">音乐人</a>
                <a href="#">词曲作者</a>
            </div>
        </div>
        <div class="footer">
            <div class="w">
                <div class="ban">
                    <div class="logo">
                        <img src="./imgs/logo.png" alt="">
                    </div>
                    <div class="hd">
                        <div class="left">
                            网易公司版权所有©1997-2020杭州乐读科技有限公司运营<br> 浙网文[2018]3506-263号 粤B2-20090191-18 工业和信息化部备案管理系统网站
                        </div>
                        <div class="right">
                            <ul>
                                <li><a href="#">联系我们</a></li>
                                <li>|</li>
                                <li><a href="#">隐私政策</a></li>
                                <li>|</li>
                                <li><a href="#">服务条款</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>

</html>